<template>
  <div class="home">
 <div class="haibei-banner">

      <div class="swiper-container">
        <div class="swiper-wrapper">
          <!-- <template v-for="item of banners"> -->
          <div class="swiper-slide" style="background:url(/static/images/banner1-1.jpg) top center no-repeat;background-size:cover;height:1010px">
            <div class="flex-center">
              <div class="tc">
                <p class=" fs40 white-color bold">海贝社区</p>
                <p class="mt10 fs18 white-color">TRADING CAN BE SO EASY</p>
                <p class="mt30 fs40 white-color bold">成熟的外汇交易辅助平台 引领智能交易的未来</p>
                <p class="mt30 light-grey-banner  fs22">从来就没有难做的外汇，择名师，定天下。</p>
                <p class="light-grey-banner  fs22 mt20">自动/手动跟随包容并蓄，乐交易，悦生活</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="background:url(/static/images/banner2-1.jpg) top left no-repeat;background-size:cover;height:1010px">
            <div class="flex-left">
              <div class="" style="margin-left:200px;">
                <p class=" fs40 white-color bold">悦享生活 乐享交易 海贝社区
                  <br>——全球外汇交易智能辅助平台</p>
                <p class="mt30 light-grey-banner  fs22">海贝社区客户端多平台涵盖</p>
                <p class="mt30">
                  <img src="/static/images/banner2-2.png" alt="">
                </p>
              </div>
            </div>
          </div>
          <div class="swiper-slide" style="background:url(/static/images/banner3-1.jpg) top center no-repeat;background-size:cover;height:1010px">
            <div class="haibei-warpper">
              <div style="height:174px;"></div>
              <div class="tc">
                <p class=" fs40 bold white-color">海贝社区
                </p>
                <p class="mt15 fs30 white-color"> 只需一键 即可自动跟单&nbsp;&nbsp;
                </p>
                <p class="mt15 fs30 white-color">
                  做简单的外汇 为您的品质生活腾出时间

                </p>

              </div>


            </div>
          </div>
          <!-- </template> -->
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
      </div>
    </div>

    <div class="haibei-guide">
      <div class="haibei-warpper">
        <p class="c-blue-color fs30 tc mt50">新手引导</p>
        <p class="fs18 tc mt20 c-gray-color">一分钟带你玩转社区，high翻汇市</p>

        <div class="haibei-guide-content clearfix">
          <template v-for="(value,key) in lists">
            <dl class="c-gray-color tc guide-item index-items" :key="key" onclick="location.href='guide.html#/students'">
              <dt class="tc">
                <img :src="value.url" alt="">
              </dt>
              <dd class="mt30 c-black-color fs16">0{{key+1}}
                <p class="mt10 fs16">{{value.title}}</p>
              </dd>
              <dd class="mt15 c-gray-color fs12 " style="line-height:25px;" v-html="value.desc"></dd>
            </dl>
          </template>
        </div>
      </div>
    </div>
    <div class="haibei-platform" style="background:url(/static/images/banner3.jpg) no-repeat;background-size:cover;">
      <!-- <img src="/static/images/platform.jpg" alt="" width="100%"> -->
      <div class="haibei-warpper" style="color:#fff">
        <p class=" fs30 tc">平台优势</p>
        <p class="fs18 tc mt20">智能跟单 轻松交易 制胜外汇</p>
        <div class="haibei-guide-content clearfix">
          <template v-for="(value,key) in platform">
            <dl class=" tc platform-item index-items" :key="key">
              <dt class="tc">
                <img :src="value.url" alt="">
              </dt>
              <dd class="mt20 fs16">
                {{value.title}}
              </dd>
              <dd class="mt15 fs12" v-html="value.desc"></dd>
            </dl>
          </template>
        </div>
      </div>
    </div>

    <div class="haibei-news">
      <div class="haibei-warpper">
        <p class="c-blue-color fs30 tc">最新动态</p>
        <p class="fs18 tc mt20 c-gray-color">一分钟带你玩转社区，high翻汇市</p>
        <div class="haibei-guide-content clearfix" style="flex-wrap: nowrap;">
          <template v-for="(value,key) in newsList">

            <dl class="c-gray-color tc platform-item index-items" :key="key">
              <dt class="tc">
                <img :src="value.url" alt="">
              </dt>

              <dd class="mt30 c-black-color fs16">
                <p class="mt10 fs16">{{value.title}}</p>
                <p class="mt10 fs16">{{value.subTitle}}</p>
              </dd>
              <dd class="mt15 c-gray-color fs12" style="line-height:25px" v-html="value.desc"></dd>
            </dl>
          </template>
        </div>
      </div>
    </div>

    <div class="haibei-news" style="border-top:1px solid #f4f4f4">
      <div class="haibei-warpper">
        <p class="c-blue-color fs30 tc">合作经纪商</p>
        <!-- <p class="fs18 tc mt20 c-gray-color">多平台涵盖，交易自在随心</p> -->
        <div class="haibei-guide-content clearfix">
          <!-- <template v-for="(value,key) in download"> -->
          <dl class="c-gray-color tc angent_list" >
            <dt class="tc">
              <a href="http://www.rcmfx.com" target="_blank">
                <img src="/static/images/angent_01.png" alt="">
              </a>
            </dt>
          </dl>
          <dl class="c-gray-color tc angent_list">
            <dt class="tc">
              <a href="http://www.fort-fx.com" target="_blank">
                <img src="/static/images/angent_02.png" alt="">
              </a>
            </dt>
          </dl>
          <dl class="c-gray-color tc angent_list">
            <dt class="tc">
              <a href="https://vg-fx.com/zh-hans/" target="_blank">
                <img src="/static/images/v_angent.png" alt="">
              </a>
            </dt>
          </dl>
           <dl class="c-gray-color tc angent_list">
            <dt class="tc">
              <a href="https://mqs-fx.com/zh-hans/" target="_blank">
                <img src="/static/images/angent_04.png" alt="">
              </a>
            </dt>
          </dl>
          <!-- </template> -->
        </div>
      </div>
    </div>
    <div class="haibei-platform">
      <div class="haibei-warpper">
        <p class="c-blue-color fs30 tc">下载客户端</p>
        <p class="fs18 tc mt20 c-gray-color">多平台涵盖，交易自在随心</p>
        <div class="haibei-guide-content clearfix">
          <template v-for="(value,key) in download">
            <dl class="c-gray-color tc platform-item index-items" :key="key" @click="downloadModal(value)">
              <dt class="tc">
                <a href="javascript:;">
                  <img :src="value.iconUrl" alt="" @mouseenter="mouseenterImg($event,value)" @mouseleave="mouseleaveImg($event,value)">
                </a>
              </dt>
            </dl>
          </template>
        </div>
      </div>
    </div>
    <m-modal v-if="showModal" @close="showModal = false">
      <h3 class="tc" slot="header">{{items.title}}</h3>
      <div slot="body">
        <p class="tc">{{items.version}}</p>
        <div class="img-code-btn">
          <div class="download-btn">
            <a :href="items.downloadUrl" class="wap-download" target="_blank" style="padding:10px 30px;color:#fff;">下载安装包</a>
          </div>
          <div class="donwl-img-code">
            <div id="code_id"></div>
            <!-- <img src="/static/images/u82.png" width="130" alt=""> -->
            <p class="tc mt10 c-gray-color">扫描二维码下载</p>
          </div>
        </div>
      </div>
    </m-modal>

  </div>
</template>

<script>
import data from '@/utils/index_data';
import mModal from '@/components/common/Modal';
import mHeader from '@/components/common/Header'
import mFooter from '@/components/common/Footer'
export default {
  data() {
    return {
      active: 'index',
      lists: data.guide,
      platform: data.platform,
      newsList: data.newsList,
      download: dConfig.download,
      banners: data.banners,
      showModal:false,
      items:{}
    }
  },
  mounted() {
    new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      paginationClickable: true,
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      autoplay:5000,
      speed:500,
    });
  },
  methods: {
    mouseenterImg(e, item) {
      e.target.src = item.hover;
    },
    mouseleaveImg(e, item) {
      e.target.src = item.iconUrl;
    },
    downloadModal(item){
      if(item.type==='pc'){
        location.href=item.downloadUrl;
        return;
      }else{
        if(item.isDown){
          this.showModal=true;
          this.items=item;
        setTimeout(()=>{
          var qrcode = new QRCode(document.getElementById("code_id"), {
            text: item.mobileUrl,
            width: 130,
            height: 130,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
          });
        },200)
        }
      }
     
    }
  },
  components: { mFooter,mModal,mHeader }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.angent_list{
  padding-top: 80px;
  flex: 1;
}
</style>
